<template lang="pug">
  div
    el-row(v-if="$route.path === '/educational'" :gutter="20")
      el-col(:span="24")
        .myCourse
          my-course
      <!--el-col(:span="8")-->
        <!--section.whitePanel.home-part.myCourse-->
          <!--h2 我的课程-->
            <!--el-link.fr.more(:underline="false"  @click="$router.push('/educational/courseManage')") 课程管理-->
              <!--span.icon.ml5-->
                <!--i.el-icon-arrow-right-->
          <!--.course(v-for="item in courseList" :key="item.id" @click="detailHandle(item.infoId)")-->
            <!--.gradientBtn.tag {{item.tag}}-->
            <!--a-image(:url="item.url" width="100%" height="230px" :preview="false")-->
            <!--.detailBox-->
              <!--h3 {{item.title}}-->
              <!--p-->
                <!--el-tag.commonTag.mr5(color="#DA473A" effect="dark" type="danger" size="mini") 摘要-->
                <!--| {{item.detail}}-->
              <!--p.c_secondary-->
                <!--small.mr20 教案编号： {{item.indexInPackage}}-->
                <!--&lt;!&ndash;small&ndash;&gt;-->
                  <!--&lt;!&ndash;i.el-icon-user-solid.mr5&ndash;&gt;-->
                  <!--&lt;!&ndash;| 月龄：20~30&ndash;&gt;-->
              <!--info-drawer(:visible.sync="infoVisible" :id="infoId")-->
    router-view(v-else)
</template>
<script>
import InfoDrawer from './courseManage/teachPlan/components/infoDrawer'
import AImage from '@/components/Basic/Image'
import MyCourse from './components/myCourse'

export default {
  components: {
    AImage,
    MyCourse,
    InfoDrawer
  },
  data () {
    return {
      courseList: [
        {
          tag: '能力培养',
          url: 'https://saas.res.dotflat.cn/teach/file/common/png/2022-01-18/94efaead3beb41a59bfd8424c27a7bfd_1642494634474.png',
          detail: '宝宝哭闹 讲故事',
          indexInPackage: '10001',
          infoId: '32fdaecd38c244098d96dc2afbaede41'
        },
        {
          tag: '能力培养',
          url: 'https://saas.res.dotflat.cn/teach/file/common/png/2022-01-18/94efaead3beb41a59bfd8424c27a7bfd_1642494715231.png',
          detail: '国际读书日',
          indexInPackage: '10003',
          infoId: '32fdaecd38c244098d96dc2afbaede43'
        }
      ],
      infoVisible: false,
      infoId: 'ec36a02356bc4bad9b133f1f94067b61'
    }
  },
  methods: {
    // 查看详情
    detailHandle (infoId) {
      this.infoId = infoId
      this.infoVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.whitePanel {
  ::v-deep{
    .tableWrapper{
      padding: 0
    }
  }
}

.actions{
  ::v-deep{
    .el-button--info{
      background: #999999;
      border-color: #999999;

      &:hover{
        background: #DA473A;
        border-color: #DA473A;
      }
    }
  }
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.myCourse{
  height: 800px;
  overflow: scroll;

  .course{
    position: relative;

    + .course{
      margin-top: 40px
    }

    .tag{
      position: absolute;
      z-index: 10;
      top: 15px;
      left: -15px;
      height: 30px;
      display: inline-block;
      padding: 0 24px;
      line-height: 30px;
      border-top-left-radius: 15px;
      border-bottom-right-radius: 15px;
      color: #fff;
      font-size: 13px;
      font-family: PingFang SC;
    }
    .detailBox{
      p {
        line-height: 22px;
        font-size: 15px;
        color: #333333;
        font-family: PingFang SC;

        &.c_secondary{
          margin-top: 10px;
          font-size: 13px;
          font-weight: 500;
          color: #999999;
        }
      }
    }
  }

  .commonTag{
    border: none;
    border-radius: 0;
    line-height: 20px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0 10px
  }
}
</style>
